<!--个人信息维护-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('个人信息')">
</head>
<!--数据校验插件静态资源文件-->
<script src="js/bootstrapValidator.min.js"></script>
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<style>
    div.container div.row div {
        margin: 5px 0px;
        text-align: center;
    }
</style>

<body>

<div id="workingArea">
    <div class="container">
        <!--<div th:replace="include/admin/adminNavigator::html"></div>-->
        <div class="row">
            <!--导航栏-->
            <div class="col-md-12  ">
                <!--顶部导航栏-->
                <div th:replace="include/admin/adminNavigator::html"></div>
            </div>

            <!--面包屑导航-->
            <div class="col-md-12 col-sm-12 col-xs-12 " style="text-align: left">
                <ol class="breadcrumb">
                    <li><a href="/home">个人中心</a></li>
                    <li>个人信息管理</li>
                </ol>
            </div>


            <!--栅栏布局3列-->
            <div class="col-md-3 col-sm-3 col-xs-3 ">
                <div th:replace="include/admin/adminLeftMenu::html"></div>
            </div>

            <!--栅栏布局9列开始-->
            <div class="col-md-9 col-sm-9 col-xs-9">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="row clearfix">
                        <form class="form-horizontal" role="form">
                            <div class="col-md-4 col-sm-12 col-xs-12 ">
                                <!--用户自己上传的头像-->
                                <span th:if="null!=${session.user.portrait}"><img height="140px"
                                                                                  width="140px"
                                                                                  th:src="'img/user/'+${session.user.portrait}"
                                                                                  class="img-circle"></span>
                                <!--当用户没有自己设置头像时使用默认-->
                                <span th:unless="null!=${session.user.portrait}"><img height="140px"
                                                                                      width="140px"
                                                                                      th:src="'img/user/default2.jpg'"
                                                                                      class="img-circle"></span>
                                <div class="form-group">
                                    <label class="col-sm-6 col-sm-6 col-xs-6 control-label">上传头像：</label>
                                    <div class="col-sm-6">
                                        <input id="image" type="file" @change="getImage($event)">
                                    </div>
                                </div>
                            </div>
                            <!--右侧表单元素占八格-->
                            <div class="col-md-8 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="col-sm-4 col-sm-12 col-xs-12 control-label">用户名：</label>
                                    <div class="col-sm-6 col-sm-12 col-xs-12">
                                        <input name="username" disabled="disabled" class="form-control"
                                               v-model="bean.name"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4  control-label">密码：</label>
                                    <div class="col-sm-6  col-xs-12">
                                        <input name="password" class="form-control" v-model="bean.password"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4  control-label">手机号：</label>
                                    <div class="col-sm-6">
                                        <input name="phone" class="form-control" v-model="bean.phone" placeholder="选填"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">姓名：</label>
                                    <div class="col-sm-6">
                                        <input name="name" class="form-control" v-model="bean.realname"
                                               placeholder="选填"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">角色：</label>
                                    <div class="col-sm-6">
                                        <input class="form-control" disabled="disabled" v-model="bean.role"/>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary" @click="update">提交修改</button>
                        </form>
                    </div>
                </div>

            </div>
            <!--栅栏布局9列结束-->
        </div>
    </div>
</div>

<!--前后端交互-->
<script>
    $(function () {
        /*文档加载开始*/
        var data4Vue = {
            uri: "user",
            bean: {id: "", name: "", password: "", portrait: "", realname: "", phone: "", role: ""},
            img_portrait: ""
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted: function () {
                this.getUser();
            },
            methods: {
                /*获取session中用户id，然后查询出用户数据*/
                getUser: function () {
                    this.bean.id = [[${session.user.id}]];
                    var url = this.uri + "/" + this.bean.id;
                    axios.get(url).then(function (response) {
                        console.log(response.data.data);
                        vue.bean = response.data.data;
                    })
                },
                /*更新个人信息*/
                update: function () {
                    /*bootstrap提交验证*/
                    var validator= $('form').data('bootstrapValidator').validate();
                    if(!validator.isValid()){
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                    }
                    var url = this.uri + "/" + this.bean.id;
                    //axios.js 上传文件要用 formData 这种方式
                    var formData = new FormData();
                    formData.append("id", this.bean.id);
                    formData.append("name", this.bean.name);
                    formData.append("password", this.bean.password);
                    formData.append("realname", this.bean.realname);
                    formData.append("phone", this.bean.phone);
                    formData.append("role", this.bean.role);
                    /*头像*/
                    formData.append("image", this.img_portrait);
                    axios.put(url, formData).then(function (response) {
                        if (response.data.code) {
                            alert("修改失败");
                        } else
                            alert("修改成功");
                        location.reload();
                    });
                },
                /*退出当前用户*/
                logout: function () {
                    var url = "logout";
                    axios.post(url).then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 0) location.href = "fore_login";
                    });
                },
                getImage: function (event) {
                    this.img_portrait = event.target.files[0];
                    console.log(this.img_portrait)
                },
                logout: function () {
                    var url = "logout";
                    axios.post(url).then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 0) location.href = "fore_login";
                    });
                },
            }
        });
    });


</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                phone: {
                    validators: {
                        regexp: {
                            /*手机号1开头，第二位34578 然后11位*/
                            regexp: /^1[3|4|5|7|8][0-9]{9}$/,
                            message: '请输入正确的11位手机号码'
                        }
                    }
                },
                name: {
                    validators: {
                        regexp: {
                            /*中文 2-7位*/
                            regexp: /^([\u4e00-\u9fa5]){2,7}$/,
                            message: '请输入正确的姓名'
                        }
                    }

                }
            },
            submitHandler: function (validator, form, submitButton) {
                alert("submit");
            }
        });
    });
</script>
</body>
</html>